<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="test">
			<p>{{ msg }}</p>
			<div v-html="msg + '哈哈哈哈'"></div>
			<div v-text="msg"></div>
			<input type="text" :title="btn"  v-model:value="btn" />
		<!--
			v-bind与v-model区别
			1、v-bind只能单项数据绑定，v-model可以双向数据绑定
			2、v-bind可以绑定html元素任意属性，v-model只能默认绑定value
			3、v-bind绑定的是js语句，v-model只能绑定data重的数据值
		-->
		
		</div>
		<script>
			var vue = new Vue({
				el:'#test',
				data:{
					msg:'testhshshs',
					btn:'点我点我快点我！',
					num:1
				},
				methods:{
					clicktest(){
						this.btn = '没想到吧？！' + String(this.num);
						this.num++;
					}
				}
			})
		</script>
	</body>
</html>
